<template>
  <div class="XueSheng">
    <div class="XueSheng_tit">
      <h1>学生添加&gt;</h1>
    </div>
    <div class="XueSheng_main">
      <div class="loginname">
        <el-form
          :model="from"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          ref="myfrom"
        >
          <el-form-item label="添加学生" prop="classInfo">
            <div class="selects">
              <el-select
                v-model="select1"
                @change="mustSelsct1"
                placeholder="请选择年级"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="select2"
                @change="mustSelsct2"
                placeholder="请选择班级"
              >
                <el-option
                  v-for="item in classes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item label="班级人数" prop="propleNum">
            <el-input
              v-model="propleNum"
              placeholder="请输入班级人数,最多不超过100人"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <div class="btnlogin">
              <el-button block type="success" class="btn1" @click="submitFrom"
                >添加</el-button
              >
              <el-button
                block
                type="warning"
                class="btn1 btn2"
                @click="resetform"
                >重置</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "@vue/runtime-core";
import { ElMessage } from "element-plus";
import { ajax } from "@/api";

var Year = new Date().getFullYear();
export default {
  setup(props) {
    const myfrom = ref();
    const select1 = ref();
    const select2 = ref();
    const propleNum = ref();
    //年级列表
    const options = [
      {
        value: "01",
        label: "一年级",
      },
      {
        value: "02",
        label: "二年级",
      },
      {
        value: "03",
        label: "三年级",
      },
      {
        value: "04",
        label: "四年级",
      },
      {
        value: "05",
        label: "五年级",
      },
      {
        value: "06",
        label: "六年级",
      },
    ];

    //班级列表
    const classes = [
      {
        value: "01",
        label: "(1)班",
      },
      {
        value: "02",
        label: "(2)班",
      },
      {
        value: "03",
        label: "(3)班",
      },
      {
        value: "04",
        label: "(4)班",
      },
      {
        value: "05",
        label: "(5)班",
      },
      {
        value: "06",
        label: "(6)班",
      },
      {
        value: "07",
        label: "(7)班",
      },
      {
        value: "08",
        label: "(8)班",
      },
      {
        value: "09",
        label: "(9)班",
      },
    ];

    //  选中的年级
    const mustSelsct1 = (value01) => {
      console.log(value01);
      state.value01 = value01;
    };
    // 选中的班级
    const mustSelsct2 = (value02) => {
      console.log(value02);
      state.value02 = value02;
    };

    // 提交信息
    let xsArr = [];
    const submitFrom = () => {
      xsArr = [];
      var student = propleNum.value;
      // 最大人数限制
      if (student > 100) {
        ElMessage.error("最多不超过100人,请重新输入");
      } else {
        for (var i = 1; i <= student; i++) {
          if (i < 10) {
            var accounts = Year + state.value01 + state.value02 + "00" + i;
            accounts = parseInt(accounts);
            let obj = {
              account: accounts,
              classInfo: state.value01 + state.value02,
            };
            xsArr.push(obj);
          } else if (9 < i && i < 100) {
            var accounts = Year + state.value01 + state.value02 + "0" + i;
            accounts = parseInt(accounts);
            let obj = {
              account: accounts,
              classInfo: state.value01 + state.value02,
            };
            xsArr.push(obj);
          } else if (i == 100) {
            var accounts = Year + state.value01 + state.value02 + i;
            accounts = parseInt(accounts);
            let obj = {
              account: accounts,
              classInfo: state.value01 + state.value02,
            };
            xsArr.push(obj);
          }
        }
        if (i == parseInt(student) + 1) {
          console.log("123");
          ajax.addStudent({ Account: xsArr }).then((res) => {
            console.log(res);
          });
        } else {
          console.log("无额");
        }
      }
    };
    // 重置信息
    const resetform = () => {
      console.log("你重置了信息");
      // location.reload();
      select1.value = null,
      select2.value = null,
      propleNum.value = null
    };

    const state = reactive({
      value01: null,
      value02: null,
      form: {
        dep: null,
        classInfo: null,
        propleNum: null,
        rules: [{}],
      },
    });
    return {
      ...toRefs(state),
      myfrom,
      select1,
      options,
      select2,
      classes,
      propleNum,
      mustSelsct1,
      mustSelsct2,
      submitFrom,
      resetform,
    };
  },
};
</script>

<style lang="scss" scoped>
.XueSheng {
  width: 100%;
  height: 100%;
  position: relative;
  .XueSheng_tit {
    h1 {
      font-size: 20px;
      font-weight: bold;
    }
  }
  .XueSheng_main {
    position: absolute;
    padding: 10px;
    width: 400px;
    height: 400px;
    border: 1px solid black;
    left: 0;
    margin: auto;
    right: 0;
    bottom: 0;
    top: 0;
    border-radius: 10px;
    .loginname {
      margin-top: 50px;
      .el-form-item__label {
        color: #333;
      }
      .form_router {
        width: 100%;
        display: flex;
        justify-content: space-between;
        a {
          color: #ff6700;
          font-size: 14px;
        }
      }
      .btnlogin {
        width: 100%;
        .btn1 {
          margin-bottom: 10px;
          width: 100%;
        }
        .btn2 {
          margin-left: 0px;
        }
      }
      .radio {
        width: 100%;
        .el-radio-group {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
